<template>
	<view class="container">

		<view class="">
			<view class="text-15 flex justify-start align-center">
				<scroll-view scroll-x class="bg-white nav text-666" style="width:100%;" scroll-with-animation
					:scroll-left="scrollLeft">
					<view class="cu-item" :class="TabCur==999?'color cur text-bold':''" @tap="tabSelect" :data-id="999">
						<view>全部</view>
					</view>
					<view class="cu-item" :class="item.id==TabCur?'color cur text-bold':''"
						v-for="(item,index) in classification1" @tap="tabSelect" :data-id="item.id">
						<view>{{item.name}}</view>
					</view>
				</scroll-view>
			</view>
			<view class="bg-white radius10 padding-sm margin-sm" v-for='(item,index) in list' :key='index'>
				<view class="flex justify-between align-center text-bold">
					<view class="text-15 text-333">
						订单编号{{item.orderNo}}
					</view>
					<view class="text-sm color">
						<block v-if='item.status==0'>待付款</block>
						<block v-if='item.status==1'>待发货</block>
						<block v-if='item.status==2'>配送中</block>
						<block v-if='item.status==3'>已收货</block>
						<block v-if='item.status==4'>已评价</block>
						<block v-if='item.status==5'>已取消</block>
					</view>
				</view>
				<view @click="toPage('/filePage/pages/goods-detail/goods-detail?id=' + val.productId)"
					class="flex  justify-start margin-top" v-for='(val,i) in item.itemList' :key='val.id'>
					<image :src="val.productPic" mode="" style="width: 166rpx;height: 166rpx;min-width: 166rpx;">
					</image>
					<view class="margin-left-sm flex-treble">
						<view class="text-13 text-333 flex justify-between">

							<view class="text-cut-2" style="width: 300rpx;max-width: 300rpx;">
								{{val.productName}}
							</view>
							<view class="flex flex-direction align-end">
								<view class="">
									¥ {{ parseFloat(val.price / 100).toFixed(2)}}
								</view>
								<view class="text-999 margin-top-xs">
									×{{val.num}}
								</view>
							</view>
						</view>
						<view class="text-sm text-999 margin-top flex justify-between">
							{{val.productAttr}}
							<block v-if='item.purchaseStatus'>
								团购商品
							</block>
							<block v-else>
								  <view v-if='item.type==1'>商城订单</view>
								  <view v-else>采购订单</view>
							</block>
						 
						</view>
					</view>
				</view>
				<view class="flex justify-end align-center text-df margin-top">
					<view class="text-999">
						总价 ¥{{parseFloat(item.productAmount / 100).toFixed(2)}} 优惠¥ {{parseFloat(item.couponAmount / 100).toFixed(2)}}
					</view>
					<view class="text-333 margin-left-xs">
						实付金额 ¥{{parseFloat(item.realAmount / 100).toFixed(2)}}
					</view>
				</view>
				<view class="flex justify-end align-center margin-top">
					<button  v-if='item.status==1' @click="send(item)" class="btn2 round text-13 margin-left text-white text-999" >发货</button>
				
				</view>
			</view>
		</view>
		<w-picker :visible.sync="visible" mode="selector" value="1"
			:options="selectorList" @confirm="onConfirm($event)" @cancel="onCancel" ref="selector">
		</w-picker>
		<uni-load-more :status="loading" />
	</view>
</template>

<script>
	import BetterPull from '@/common/util/BetterPull'
	export default {
		mixins: [
			BetterPull({
				async getPage(page, done) {
					this.loading = 'loading';
					const obj = {
						pageNum: page,
						pageSize: 10,
						purchaseStatus: 0,
						shopId:uni.getStorageSync("shopIdApply")
					}
					if (this.TabCur != 999) {
						console.log(this.TabCur)
						obj['status'] = this.TabCur
					}


					const [err, res] = await this.$get(this.$api.serviceOrderList, obj)
					if (res) {
						var data = res.data.list
						done(data);
						if (data.length < 10) {
							this.loading = 'noMore';
						} else {
							this.loading = 'more';
						}

					}
					if (err) {
						done([]);
						this.loading = 'noMore';
					}
				}
			})
		],
		data() {
			return {
				baseUrl: this.$config.baseUrl,
				title: '',
				userId: uni.getStorageSync('userId'),
				status: 1,
				loading: "more",
				serviceType: 3,
				TabCur: '999',
				scrollLeft: 0,
				classification1: [{
						name: '待付款',
						id: '0'
					}, {
						name: '待发货',
						id: '1'
					}, {
						name: '配送中',
						id: '2'
					}, {
						name: '已收货',
						id: '3'
					},
					{
						name: '已评价',
						id: '4'
					},
					{
						name: '已取消',
						id: '5'
					}

				],
				selectorList:[ {label:'微信',value:'1'},{label:'余额支付',value:'2'}],
				visible:false,
				id:''
			};
		},
		onUnload() {
			uni.switchTab({
				url: '/pages/file/file'
			})
		},
		onLoad(options) {
			if (options.title) {

				uni.setNavigationBarTitle({
					title: options.title
				})
				this.title = options.title
			}
		},
		methods: {
			checkOut(status) {
				// console.log(status)
				this.status = status
			},
			toPage(url) {
              this.$util.openNewPage(url)
			},
			toPage2(url,item) {
			  this.$util.openNewPage(url+JSON.stringify(item))
			},
			tabSelect(e) {
				// console.log(e)
				if (e.currentTarget.dataset.id != 999) {
					this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
				}
				this.TabCur = e.currentTarget.dataset.id;
				this.Refresh();
			},
			send(item){
				const that = this
				uni.navigateTo({
					url:'/pagesA/pages/serviceProducList/send/send?id='+item.id
				})
			}
			
		
			
		}
	}
</script>

<style lang="scss" scoped>
	.tabs {
		view {
			border-bottom: 6rpx solid #fff;
		}

		.on {
			font-weight: bold;
			color: #221815;
			border-bottom: 6rpx solid #ED7200;
		}
	}

	.btn {
		padding: 20rpx 50rpx;
	}

	.btn2 {
		padding: 20rpx 24rpx;
		border: 2rpx solid;
	}

	.cur>view {
		border-bottom: 4rpx solid;
		width: 100%;
		height: 100%;
	}

	.nav .cu-item.cur {
		border-bottom: 0;
	}
</style>
